<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.7.3/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>

<body>
    <div class="layuimini-container" id="vue">
        <div class="layuimini-main">

            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="userName" autocomplete="off" class="layui-input"
                                        id="userName">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>


            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

            <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            </script>

        </div>
    </div>
    <script type="text/html" id="sexTpl">
        {{# if(d.sex) { }}
        男
        {{# } else { }}
        女
        {{# } }}
    </script>


    <script src="../lib/layui-v2.7.3/layui/layui.js" charset="utf-8"></script>
    <script src="../js/vue.js"></script>
    <script src="../api/urlConfig.js"></script>
    <script>


        layui.use(['table', 'util'], function () {
            var table = layui.table
                , util = layui.util;

            //监听单元格编辑
            table.on('edit(currentTableId)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
            });
        });

        layui.use(['form', 'table', 'upload'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            // 初次加载使用 /admin/user/list
            table.render({
                elem: '#currentTableId',
                url: ipURL + "/admin/user/list",  // 默认接口
                headers: { token: localStorage.token },
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data,//解析数据列表
                    };
                },
                response: {
                    statusCode: 0 //规定成功的状态码，默认：0
                },
                text: { none: '无数据' },
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    { type: "checkbox", width: 50 },
                    { field: 'id', width: 80, title: 'ID', sort: true, hide: true },
                    { field: 'nickName', width: 150, title: '昵称' },
                    { field: 'sex', width: 80, title: '性别', templet: "#sexTpl" },
                    { field: 'email', width: 150, title: '邮箱' },
                    { title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center" }
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var name = $('input[name="userName"]').val();

                // 执行搜索重载，动态设置为 /admin/user/page
                table.reload('currentTableId', {
                    url: ipURL + "/admin/user/page",  // 动态改变为搜索接口
                    page: {
                        curr: 1 // 重新从第一页开始
                    },
                    where: {
                        name: name,  // 搜索条件
                    }
                });

                return false; // 阻止表单提交
            });


            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data; // 获取当前行数据

                if (obj.event == 'delete') {
                    layer.confirm('确定删除选中的记录吗?', function (index) {
                        $.ajax({
                            url: ipURL + '/admin/user/' + data.id,  // 假设是删除用户接口
                            method: 'delete',
                            beforeSend: function (request) {
                                request.setRequestHeader("token", localStorage.token);
                            },
                            success: function (res) {
                                if (res.success) { // 根据后端返回的成功标志判断
                                    layer.msg(res.message); // 显示成功信息
                                    obj.del();  // 删除当前行数据
                                } else {
                                    layer.msg(res.message); // 显示后端返回的错误信息
                                }
                                layer.close(index); // 关闭确认框
                            },
                            error: function (xhr) {
                                layer.msg(xhr.responseJSON.message || '删除失败'); // 显示异常信息
                            }
                        });
                    });

                    // 编辑操作
                } else if (obj.event == 'edit') {
                    form.val("userForm", { // userForm 是表单的 lay-filter 属性值
                        "id": data.id, // 假设返回的数据中有 id
                        "nickName": data.nickName, // 假设返回的数据中有昵称
                        "sex": data.sex.toString() // 确保性别是字符串形式
                    });
            
                    layer.open({
                        type: 1,
                        title: '编辑用户信息',
                        area: ['400px', '300px'],
                        content: $('#userForm'), // 用户信息表单
                        btn: ['提交', '退出'],
                        end: function () {
                            $('#userForm').css('display', 'none'); // 关闭时隐藏表单
                        },
                        yes: function () {
                            // 提交表单时的逻辑
                        },
                        success: function (layero, index) {
                            layui.use('form', function () {
                                var form = layui.form;
                                layero.addClass('layui-form');
            
                                // 设置提交按钮
                                var submitBtn = layero.find('.layui-layer-btn0');
                                submitBtn.attr('lay-filter', 'formVerify').attr('lay-submit', '');
            
                                // 监听回车键
                                layero.keydown(function (e) {
                                    if (e.keyCode == 13) {
                                        submitBtn.click();
                                    }
                                });
            
                                // 监听表单提交事件
                                form.on('submit(formVerify)', function (data) {
                                    $.ajax({
                                        url: ipURL + '/admin/user/', // 用户更新的接口
                                        method: 'put',
                                        data: JSON.stringify(data.field), // 将表单数据转换为 JSON
                                        dataType: 'JSON',
                                        contentType: 'application/json;charset=UTF-8',
                                        beforeSend: function (request) {
                                            request.setRequestHeader("token", localStorage.token); // 添加 token
                                        },
                                        success: function (res) {
                                            layer.msg(res.message); // 提示更新成功
                                            layer.close(index); // 关闭弹窗
                                            table.reload('currentTableId'); // 刷新表格数据
                                        },
                                        error: function (err) {
                                            layer.msg(err.message); // 提示更新失败
                                        }
                                    });
            
                                    return false; // 阻止表单默认提交
                                });
                            });
                        }
                    });
                }
            });



        });
    </script>

</body>

<style type="text/css">
    .myData .layui-form-item {
        margin: 20px 100px 10px 45px;
    }

    .myData .layui-form-label {
        width: 80px;
    }
</style>

<form class="layui-form myData" action="save" method="post" lay-filter="userForm" id="userForm" style="display: none">
    <input type="hidden" name="id" />

    <!-- 昵称输入框 -->
    <div class="layui-form-item">
        <label class="layui-form-label">昵称：</label>
        <div class="layui-input-block">
            <input type="text" name="nickName" lay-verify="required" placeholder="请输入昵称" class="layui-input" />
        </div>
    </div>

    <!-- 性别单选框 -->
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="true" title="男生" checked>
            <input type="radio" name="sex" value="false" title="女生">
        </div>
    </div>

</form>

</html>